<template>
  <div>
    <van-nav-bar title="充电订单" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>
  <van-tabs v-model:active="active" @click-tab="onClickTab">
    <van-tab title="待付款" name="0"></van-tab>
    <van-tab title="待评论" name="1"></van-tab>
    <van-tab title="退款/售后" name="2"></van-tab>
  </van-tabs>
  <div v-for="chargingOrder in processedChargingOrderList" :key="chargingOrder.id" v-show="chargingOrderDivShow">
    <van-card :desc="描述信息" :title="chargingOrder.stationName"
              thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
      <template #tags>
        <br>
        <van-tag plain type="primary">{{ chargingOrder.gunName }}</van-tag><br>
        <van-tag plain type="primary">订单编号： {{ chargingOrder.id }}</van-tag><br>
        <van-tag plain type="primary">充电时间： {{ chargingOrder.payTime }}</van-tag>
      </template>
      <template #footer>
        <van-tag plain type="primary">应付款： {{ chargingOrder.amount }}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getChargeRecordList } from "@/api/user";

const onClickLeft = () => history.back();
const chargingOrderDivShow = ref(true);
const payStatus = ref(0);
const chargingOrderList = ref([]);

const processedChargingOrderList = computed(() => {
  return chargingOrderList.value.map(chargingOrder => {
    try {
      return {
        id: chargingOrder.id,
        stationName: chargingOrder.chargeStationGun.chargeStationInfo.stationName,
        gunName: chargingOrder.chargeStationGun.gunName,
        orderNo: chargingOrder.orderNo,
        amount: chargingOrder.amount,
        payTime: chargingOrder.payTime
      };
    } catch (error) {
      console.error(`Error processing charging order with id ${chargingOrder.id}:`, error);
      return {
        id: chargingOrder.id,
        stationName: '未知站点',
        gunName: '未知枪号',
        orderNo: chargingOrder.orderNo,
        amount: chargingOrder.amount,
        payTime: chargingOrder.payTime
      };
    }
  });
});

const onClickTab = ({ name }) => getUserCouponInf(name);

function getUserCouponInf(data) {
  console.info(data);
  payStatus.value = data;
  console.log(payStatus.value);
  chargingOrderDivShow.value = true;
}

function getChargingOrderList() {
  getChargeRecordList(payStatus.value).then(res => {
    console.info(res.data);
    chargingOrderList.value = res.data.data;
  }).catch(error => {
    console.error('Error fetching charging orders:', error);
  });
}

getChargingOrderList();
</script>
